<template>
    <el-form>
        <el-form-item class="mb5">
            <el-button
                type="primary"
                @click="onCreate(true)"
                
            >
                子菜单
            </el-button>
            <el-button type="primary" @click="onCreate(false)" >
                菜单
            </el-button>
            <el-button type="primary" @click="onDelete" >
                刪除
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-tree
                ref="treeRef"
                class="allscreen"
                :data="treeData"
                :props="defaultProps"
                :highlight-current="true"
                empty-text="请创建菜单"
                :check-on-click-node="true"
                node-key="id"
                :expand-on-click-node="false"
                :allow-drop="allowDrop"
                :allow-drag="allowDrag"
                draggable
                @node-drop="handleDrop"
            >
                <template #default="{ node, data }">
                    <span
                        class="custom-tree-node"
                        @dblclick="ondblclick(node, data)"
                        @click="onClick(node, data)"
                        >{{ node.label }}
                    </span>
                </template>
            </el-tree>
        </el-form-item>
    </el-form>
    <MenuAction :menuId="currentMenuId"></MenuAction>
    <el-dialog
        v-model="showDetailDialog"
        title="菜单维护"
        draggable
        destroy-on-close
    >
        <MenuUpdate v-bind="param" @close="handleCloseDialog"> </MenuUpdate>
    </el-dialog>
</template>
<script setup lang="ts" name="SysMenu">
import { ref, onMounted, reactive, nextTick } from 'vue';
import { SysMenuTree } from '@/common/types/app';
import { Request } from '@/app/request';
import { ElTree } from 'element-plus';
// import { CirclePlus, Plus, Delete } from '@element-plus/icons-vue';
import type Node from 'element-plus/es/components/tree/src/model/node';
import { forEach, isNil, omit } from 'lodash';

import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
import MenuUpdate from './MenuUpdate.vue';
import { MenuModel } from '@/common/types/model';
import MenuAction from './MenuAction.vue';
type MenuNode = MenuModel & { $treeNodeId?: number };

const showDetailDialog = ref(false);
const treeRef = ref<InstanceType<typeof ElTree>>();
const treeData = reactive<SysMenuTree[]>([]);
const defaultProps = {
    children: 'children',
    label: 'label',
};
const currentMenuId = ref(0);
// const operType = ref<'新增子菜单' | '新增菜单' | '修改'>('修改');
const param = reactive<{
    operType: '新增子菜单' | '新增菜单' | '修改';
    menu: MenuModel;
}>({ operType: '修改', menu: {} });

onMounted(async () => {
    const req = new Request('菜单Tree');
    const r = await req.post();
    if (r.code > 100) {
        forEach(r.obj, (e) => {
            treeData.push(e);
        });
    }
});
/**
 *
 * @param _node : element plus的node
 * @param data : 自定义的SysMenuTree对象
 */
const ondblclick = (_node: any, data: MenuNode) => {
    currentMenuId.value = data.id as number;
    param.operType = '修改';
    Object.assign(
        param.menu as MenuModel,
        omit(treeRef.value!.getCurrentNode(), 'children'),
    );
    showDetailDialog.value = true;
};
const onClick = (_node: any, data: MenuNode) => {
    currentMenuId.value = data.id as number;
};
const onCreate = async (isChild: boolean) => {
    param.menu = {};
    if (isChild) {
        param.operType = '新增子菜单';
        param.menu.parentId = treeRef.value?.getCurrentNode()?.id;
    } else {
        param.operType = '新增菜单';
        param.menu.parentId = treeRef.value?.getCurrentNode()?.parentId;
    }
    showDetailDialog.value = true;
};
const allowDrop = () => {
    return true;
};
const allowDrag = () => {
    return true;
};
const handleDrop = async (dragNode: Node, draginNode: Node, place: string) => {
    /* if (place === 'inner') {
    } else {
    } */
};
const onDelete = async () => {
    const node = treeRef.value!.getCurrentNode();
    if (!isNil(node)) {
        const req = new Request('菜单删除', {
            ids: [node.id],
        });
        const r = await req.post();
        if (r.code > 100) {
            treeRef.value!.remove(node);
            currentMenuId.value = 0;
        }
    }
};

const handleCloseDialog = async (
    type: 'create' | 'createsub' | 'update' | 'close',
    menu?: MenuModel,
) => {
    if (type === 'create') {
        if (isNil(treeRef.value?.getCurrentNode())) {
            treeData.push(menu as MenuModel);
        } else {
            treeRef.value!.insertAfter(
                menu as TreeNodeData,
                treeRef.value?.getCurrentNode() as TreeNodeData,
            );
        }
    }
    if (type === 'createsub') {
        if (isNil(treeRef.value?.getCurrentNode())) {
            treeData.push(menu as MenuModel);
        } else {
            treeRef.value!.append(
                menu as TreeNodeData,
                treeRef.value?.getCurrentNode() as TreeNodeData,
            );
        }
    }
    if (type === 'update') {
        Object.assign(treeRef.value?.getCurrentNode() as TreeNodeData, menu);
    }
    await nextTick();
    treeRef.value!.setCurrentKey(menu?.id, true);
    showDetailDialog.value = false;
};
</script>
<style lang="scss" scoped>
.mb5 {
    margin-bottom: 10px;
}
.right {
    margin-right: 50px;
}
.allscreen {
    width: 100%;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 5px;
}
</style>
